<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="我的数据" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="operational-data">
			<view v-if="newRegister.name" class="registration before">新注册会员{{ newRegister.name }}, {{ newRegister.createdAt }}</view>
			<view class="operational-head">
				<view class="operational-head-main">
					<view class="operational-head-content">
						<image src="http://anhui.sinaimg.cn/2014/0219/U10187P1276DT20140219133918.jpg" class="operational-head-userphoto"></image>
						<view class="operational-head-txt">
							<view class="p1">{{ userInfo.contact }}</view>
							<view class="p2">商户号：{{ userInfo.id }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="operational-data-list">
				<view class="operational-data-list-title">总计</view>
				<view class="operational-data-list-ul">
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/shop3.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">商家总数：{{ members.total }}</text>
					</view>
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/order3.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">累计订单总数：{{ orders.total }}</text>
					</view>
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/price3.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">累计收益：{{ revenue.total }}</text>
					</view>
				</view>
			</view>
			<view class="operational-data-list">
				<view class="operational-data-list-title">昨日</view>
				<view class="operational-data-list-ul">
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/shop1.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">商家新增数：{{ members.yesterday }}</text>
					</view>
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/order1.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">昨日订单总数：{{ orders.yesterday }}</text>
					</view>
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/price1.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">昨日收益：{{ revenue.yesterday }}</text>
					</view>
				</view>
			</view>
			<view class="operational-data-list">
				<view class="operational-data-list-title">最近7日</view>
				<view class="operational-data-list-ul">
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/shop2.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">商家新增数：{{ members.week }}</text>
					</view>
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/order2.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">7日订单总数：{{ orders.week }}</text>
					</view>
					<view class="operational-data-list-ul-li">
						<image src="../../static/operationaldata/price2.png" class="operational-data-list-ul-li-image"></image>
						<text class="operational-data-list-ul-li-text">7日累计收益：{{ revenue.week }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				userInfo: {},
				members: {},
				orders: {},
				revenue: {},
				newRegister: {}
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			const token = uni.getStorageSync('h_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('h_role')
					uni.removeStorageSync('h_memberId')
					uni.removeStorageSync('h_token')
					uni.removeStorageSync('h_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getSelfInfo() // 得到自己的信息
			this._getStoreHZ() // 商家数据汇总
			this._getStoreDD() // 商家订单汇总
			this._getStoreSY() // 商家收益汇总
			this._getLastUpToDateUser() // 得到最新注册的那个人
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			_getSelfInfo() {
				uni.request({
					url: `${config.api_base_url}merchant/store/findByToken`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.userInfo = data
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					})
				})
			},
			_getLastUpToDateUser() {
				uni.request({
					url: `${config.api_base_url}merchant/merchantMember/newMemberReminder`,
					method: 'GET',
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true && data) {
							this.newRegister = data.rows[0]
						} else {
							this.newRegister = {}
						}
					})
				})
			},
			_getStoreHZ() {
				uni.request({
					url: `${config.api_base_url}merchant/index/member`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.members = data.members
						} else {
							this.members = {}
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					})
				})
			},
			_getStoreDD() {
				uni.request({
					url: `${config.api_base_url}merchant/index/orders`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.orders = data.orders
						} else {
							this.orders = {}
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					})
				})
			},
			_getStoreSY() {
				uni.request({
					url: `${config.api_base_url}merchant/index/revenue`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.revenue = data.revenue
						} else {
							this.revenue = {}
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
		padding: 15rpx;
		box-sizing: border-box;
	}
</style>
<style scoped>
	.operational-data {}

	.registration {
		height: 46rpx;
		background: rgba(0, 0, 0, 0.65);
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #fff;
		position: fixed;
		line-height: 46rpx;
		top: 286rpx;
		left: -100%;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		transition: all 1s linear;
	}

	.registration.before {
		left: 20rpx;
	}

	/*我的数据头部开始*/
	.operational-head {
		margin: -14rpx -14rpx 0;
		height: 244rpx;
		padding: 30rpx 14rpx 0;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(247, 181, 0, 1) 0%, rgba(245, 245, 245, 1) 100%);
		display: flex;
		margin-bottom: 14rpx;
	}

	.operational-head-main {
		flex: 1;
		overflow: hidden;
		background-color: #fff;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 32rpx 26rpx 0;
	}

	.operational-head-content {
		width: 100%;
		height: 96rpx;
		display: flex;
		flex-direction: row;
	}

	.operational-head-userphoto {
		width: 96rpx;
		height: 100%;
		border-radius: 100%;
		margin-right: 20rpx;
	}

	.operational-head-txt {
		flex: 1;
		overflow: hidden;
	}

	.operational-head-txt .p1,
	.operational-head-txt .p2 {
		text-overflow: ellipsis;
		white-space: normal;
		overflow: hidden;
	}

	.operational-head-txt .p1 {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
	}

	.operational-head-txt .p2 {
		font-size: 24rpx;
		line-height: 24px;
		color: #6D7278;
	}

	/*我的数据头部结束*/
	.operational-data-list {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 0rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 12rpx;
	}

	.operational-data-list-title {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		height: 72rpx;
		border-bottom: 2rpx solid #EEEEEE;
		line-height: 72rpx;
	}

	.operational-data-list-ul {
		overflow: hidden;
		padding: 30rpx 0rpx 15rpx;
		box-sizing: border-box;
	}

	.operational-data-list-ul-lis {
		display: flex;
	}

	.operational-data-list-ul-li {
		width: 100%;
		float: left;
		margin-bottom: 18rpx;
	}

	/* 	.operational-data-list-ul-li:nth-child(1) {
		width: 80%;
		margin-right: 40rpx;
	} */

	.operational-data-list-ul-li-image {
		width: 36rpx;
		height: 40rpx;
		display: block;
		float: left;
		margin-right: 20rpx;
	}

	.operational-data-list-ul-li-text {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		float: left;
		color: rgba(51, 51, 51, 1);
	}
</style>
